<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>elFinder 2.0</title>

        <!-- jQuery and jQuery UI (REQUIRED) -->
        <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

        <!-- elFinder CSS (REQUIRED) -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/elfinder.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/theme.css">

        <!-- elFinder JS (REQUIRED) -->
        <script type="text/javascript" src="js/elfinder.min.js"></script>

        <!-- elFinder translation (OPTIONAL) -->
        <script type="text/javascript" src="js/i18n/elfinder.es.js"></script>

        <!-- elFinder initialization (REQUIRED) -->
        <script type="text/javascript" charset="utf-8">
            $().ready(function() {
                var elf = $('#elfinder').elfinder({
                    url : 'php/connector.php',
                    lang: 'es', 
                    handlers : {
                        select : function(event, instance) {
                            console.log(event.data);
                            console.log(event.data.selected); // selected files hashes list
                            //instance.exec('open', event.data.selected[0]);
                        }
                    },
                    commandsOptions : {
                        edit : {
                            editors : [
                                {
                                    mimes : ['image'],  // add here other mimes if required
                                    load : function(textarea) {
                                        tinyMCE.execCommand('mceAddControl', true, textarea.id);
                                    },
                                    close : function(textarea, instance) {
                                        tinyMCE.execCommand('mceRemoveControl', false, textarea.id);
                                    },
                                    save : function(textarea, editor) {
                                        textarea.value = tinyMCE.get(textarea.id).selection.getContent({format : 'html'});
                                        tinyMCE.execCommand('mceRemoveControl', false, textarea.id);
                                    }
                                },
                            ]
                        }
                    },
                    contextmenu : {
                        // navbarfolder menu
                        navbar : ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info'],

                        // current directory menu
                        cwd    : ['reload', 'back', '|', 'upload', 'mkdir', 'mkfile', 'paste', '|', 'info'],

                        // current directory file menu
                        files  : [
                            'edit', '|','open', 'quicklook', '|', 'download', '|', 'copy', 'cut', 'paste', 'duplicate', '|',
                            'rm', '|', 'edit', 'rename', 'resize', '|', 'archive', 'extract', '|', 'info'
                        ]
                    },
                    uiOptions : {
                        // toolbar configuration
                        toolbar : [
                            ['back', 'forward'],
                            // ['reload'],
                            // ['home', 'up'],
                            ['mkdir', 'mkfile', 'upload'],
                            ['open', 'download', 'getfile'],
                            ['info'],
                            ['quicklook'],
                            ['copy', 'cut', 'paste'],
                            ['rm'],
                            ['duplicate', 'rename', 'edit', 'resize'],
                            ['search'],
                            ['view'],
                            ['help']
                        ]
                    }
                }).elfinder('instance');
            });
        </script>
    </head>
    <body>

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder"></div>

    </body>
</html>
